<template>
  <div class="doc-pa-1" v-if="docItem.name">
    <div class="docTabs">
      <div
        @click="tabsIndex = 0"
        :class="tabsIndex === 0 ? 'docSelectTabDiv' : ''"
      >
        📃&nbsp;&nbsp;预览
      </div>
      <div
        @click="tabsIndex = 1"
        :class="tabsIndex === 1 ? 'docSelectTabDiv' : ''"
      >
        ▶&nbsp;&nbsp;运行
      </div>
    </div>
    <div class="docTabsPanel">
      <div class="doc-d-flex" v-if="tabsIndex === 0">
        <div style="width:60%">
          <div class="docCard">
            <span>
              组件名：
              <span style="color: #6a8bad">{{ docItem.name }} </span></span
            >
            <span class="doc-pl-3">
              自定义名：
              <span style="color: #6a8bad">{{ docItem.doc.name }} </span></span
            >
            <span class="doc-pl-3">
              功能描述：
              <span style="color: #6a8bad">{{ docItem.doc.desc }} </span></span
            >
          </div>
          <div class="docCard doc-d-flex doc-mt-2 doc-py-2">
            <div
              style="width: 20%"
              class="doc-d-flex doc-flex-column doc-align-center"
            >
              <span style="color: #6a8bad; font-size: 22px">被引用</span>
              <span style="font-size: 22px">{{
                docItem.quoteList.length
              }}</span>
            </div>
            <div
              style="width: 20%"
              class="doc-d-flex doc-flex-column doc-align-center"
            >
              <span style="color: #6a8bad; font-size: 22px">使用率</span>
              <span style="font-size: 22px">{{ docItem.quoteb }}%</span>
            </div>
          </div>
        </div>
        <div
            class="docCard doc-ml-2 doc-pl-3 doc-pt-3"
            style="width:40%;background-color: #212121"
          > 
            <div class="doc-d-flex doc-justify-space-between">
              <div class="doc-d-flex">
                <div style="border-radius: 50%;background-color: #FF5F5A;height: 15px;width: 15px;"></div>
                <div class="doc-ml-2" style="border-radius: 50%;background-color: #FFBE2E;height: 15px;width: 15px;"></div>
                <div class="doc-ml-2" style="border-radius: 50%;background-color: #2ACA44;height: 15px;width: 15px;"></div>
              </div>
              <div @click="copyCode()" style="cursor:pointer" class="zi--text">复制代码</div>
            </div>
            <div class="doc-pt-1">
              <span class="lan--text">&lt;</span>
              <span class="huang--text">{{ docItem.name }}</span>
              <span class="lan--text">>&lt;/</span>
              <span class="huang--text">{{ docItem.name }}</span>
              <span class="lan--text">></span>
              <br />
              <span class="lan--text">import</span>&nbsp;&nbsp;
              <span class="bai--text">{{ docItem.name }}</span>&nbsp;
              <span class="lan--text">from</span>&nbsp;
              <span class="lan--text">'</span>
              <span class="lv--text">@{{docItem.url.substring(3,docItem.url.length-4)}}</span>
              <span class="lan--text">'</span>
              <br />
              <span class="hong--text">components</span>
              <span class="hong--text">:</span>&nbsp;&nbsp;
              <span class="lan--text">{ &nbsp;</span>
              <span class="bai--text">{{ docItem.name }}</span>
              <span class="lan--text">&nbsp; },</span>
            </div>
            
         </div>
      </div>
      <div v-if="tabsIndex === 1">
        <div>
          <div v-if="JSON.stringify(docItem.props) === '{}'">无参数列表</div>
          <div v-else style="height: 160px; overflow: auto">
            <table>
              <tbody>
                <tr>
                  <th align="start" width="80">名称</th>
                  <th align="start" width="200">交互</th>
                  <th align="start" width="80">类型</th>
                  <th align="start" width="200">默认值</th>
                  <!-- <th width="80">必填</th>
                <th width="80">可选</th> -->
                </tr>
              </tbody>
              <tbody>
                <tr v-for="(it, k, idx) in docItem.props" :key="idx">
                  <td width="80">{{ k }}</td>
                  <td width="200">
                    <div v-if="it.typex === 'Boolean'">
                      <input
                        @change="onInput"
                        v-model="formData[k]"
                        type="radio"
                        name="docFormRadio"
                        :value="true"
                      />true
                      <input
                        @change="onInput"
                        v-model="formData[k]"
                        type="radio"
                        name="docFormRadio"
                        :value="false"
                      />false
                    </div>
                    <input
                      v-else-if="it.typex === 'Number'"
                      v-model="formData[k]"
                      @input="onInput"
                      class="docInput"
                      type="Number"
                    />
                    <textarea
                      v-else-if="it.typex === 'Function'"
                      v-model="formData[k]"
                      class="docInput"
                      @input="onInput"
                      rows="4"
                      cols="21"
                    ></textarea>
                    <!-- <div v-else-if="it.typex === 'Object'">
                      {{formData[k]}}
                    </div> -->
                    <div v-else-if="it.typex === 'Object'">
                    <textarea
                      v-model="formData[k]"
                      class="docInput"
                      :class="formError[k] ? 'doc-error' : ''"
                      @input="onInput"
                      rows="3"
                      placeholder="请输入 JSON 格式数据"
                      cols="24">
                    </textarea>
                    <span v-if="formError[k]" class="doc-error--text">需要 JSON 格式数据</span>
                    <div v-if="formError[k]">示例: {"name": "张三"}</div>
                    </div>

                    <div v-else-if="it.typex === 'Array'">
                    <textarea
                      v-model="formData[k]"
                      class="docInput"
                      :class="formError[k] ? 'doc-error' : ''"
                      @input="onInput"
                      rows="3"
                      placeholder="请输入 JSON 格式数据"
                      cols="24">
                    </textarea>
                    <span v-if="formError[k]" class="doc-error--text">需要 JSON 格式数据</span>
                    <div v-if="formError[k]">示例: {"name": "张三"}</div>
                    </div>
                   
                    <input
                      v-else
                      v-model="formData[k]"
                      @input="onInput"
                      class="docInput"
                      type="text"
                    />
                  </td>
                  <td width="100">{{ it.typex }}</td>
                  <td width="200">{{ it.defaultx }}</td>
                  <!-- <td width="80">{{ it.required }}</td>
          <td width="80">{{ it.options }}</td> -->
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import utils from '../public/js/utils'
export default {
  props: {
    docItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
    docFormData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    docFormData: function (newVal) {
      this.formData = newVal;
    },
  },
  created() {
    this.formData = utils.deepClone(this.docFormData);
  },
  data: () => ({
    formData: {},
    formError: {},
    tabsIndex: 0,
  }),
  methods: {
    onInput() {
      this.formError = {}
      for(let key in this.formData){
        if(!this.inspectValue(this.formData[key], this.docItem.props[key], key)) return false
      }
      this.$emit("valueChange", this.formData);
    },
    inspectValue(val, prop, key){
      let res = true
      if(prop.typex === 'Object' || prop.typex === 'Array'){
        try{
          if(val.indexOf("{") === -1){
            this.formError[key] = true
            res = false
            return res
          }
          JSON.parse(val)
          this.formError[key] = false
        }catch(error){
          this.formError[key] = true
          res = false
        }
      }
      return res
    },
    copyCode() {
      let str = `<${this.docItem.name}></${this.docItem.name}>\n`
      +`import ${this.docItem.name} from '@${this.docItem.url.substring(3, this.docItem.url.length-4)}'\n`
      +`components: { ${this.docItem.name} },`
      utils.copyText(str, () => {
        alert('复制成功')
      });
    },
    
  },
};
</script>
<style scoped>
@import "../public/css/common.css";
</style>